Card 组件

介绍

基础卡片，一般利用基础卡片框架构造更为复杂、符合多场景的卡片等。

用法

基本引入

import { FQCard } from '@fq/fq-weapp-ui';

组件依赖的样式文件（仅按需引用时需要）

import '@fq/fq-weapp-ui/dist/styles/components/card.scss';

基础用法

<FQCard
  imageUrl='https://stantic.ifengqun.com/front/fq-oms-extsys/upload/1d0dc847a0cd20135a65f50e4949a3c4.jpg?x-oss-process=image/format,webp/interlace,1'
  label={['https://applet.ifengqun.com/fq-mall/prod/sort/globalbuy-icon.png']}
  title='4袋减61元【通过远方120项检测 升级版卤大猪耳朵(熟食)】短期不含防腐剂 配料表干净 鲜果现摘榨 10袋/盒'
/>

卡片圆角 & 图片圆角

<FQCard
  imageUrl='https://stantic.ifengqun.com/front/fq-oms-extsys/upload/1d0dc847a0cd20135a65f50e4949a3c4.jpg?x-oss-process=image/format,webp/interlace,1'
  title='4袋减61元【通过远方120项检测 升级版卤大猪耳朵(熟食)】短期不含防腐剂 配料表干净 鲜果现摘榨 10袋/盒'
  round={false}
  imageRound={false}
/>

<FQCard
  imageUrl='https://stantic.ifengqun.com/front/fq-oms-extsys/upload/1d0dc847a0cd20135a65f50e4949a3c4.jpg?x-oss-process=image/format,webp/interlace,1'
  title='4袋减61元【通过远方120项检测 升级版卤大猪耳朵(熟食)】短期不含防腐剂 配料表干净 鲜果现摘榨 10袋/盒'
  round
  imageRound
/>

<FQCard
  imageUrl='https://stantic.ifengqun.com/front/fq-oms-extsys/upload/1d0dc847a0cd20135a65f50e4949a3c4.jpg?x-oss-process=image/format,webp/interlace,1'
  title='4袋减61元【通过远方120项检测 升级版卤大猪耳朵(熟食)】短期不含防腐剂 配料表干净 鲜果现摘榨 10袋/盒'
  round={32}
  imageRound={32}
/>

标题显示行数 & 溢出方式

<FQCard
  imageUrl='https://stantic.ifengqun.com/front/fq-oms-extsys/upload/1d0dc847a0cd20135a65f50e4949a3c4.jpg?x-oss-process=image/format,webp/interlace,1'
  label={['https://applet.ifengqun.com/fq-mall/prod/sort/globalbuy-icon.png']}
  title='4袋减61元【通过远方120项检测 升级版卤大猪耳朵(熟食)】短期不含防腐剂 配料表干净 鲜果现摘榨 10袋/盒'
  titleLine={3}
  titleOverflow='ellipsis'
/>

布局插槽展示

<FQCard
  layout='column'
  size='middle'
  imageBadge={<View className='card-slot-placeholder card-badge'>imageBadge</View>}
  imageUrl='https://stantic.ifengqun.com/front/fq-oms-extsys/upload/1d0dc847a0cd20135a65f50e4949a3c4.jpg?x-oss-process=image/format,webp/interlace,1'
  title='4袋减61元【通过远方120项检测 升级版卤大猪耳朵(熟食)】短期不含防腐剂 配料表干净 鲜果现摘榨 10袋/盒'
  titleLine={2}
  header={<View className='card-slot-placeholder'>header</View>}
  promoHeader={<View className='card-slot-placeholder'>promoHeader</View>}
  promoDescription={<View className='card-slot-placeholder'>promoDescription</View>}
  infoFooter={<View className='card-slot-placeholder'>infoFooter</View>}
  price={<View className='card-slot-placeholder'>price</View>}
  actionArea={<View className='card-slot-placeholder'>actionArea</View>}
  footer={<View className='card-slot-placeholder'>footer</View>}
/>

API

属性

参数	说明	类型	默认值	版本
classNames	配置卡片内置模块的 className	`Record<SemanticDOM, string>`	-
imageUrl	封面地址	string	`''`
imageProps	设置 `Image` props，可选值参考微信image文档	ImageProps	-
imageRound	封面是否为圆角	`boolean` / `number`	`true`	`v0.2.7`
label	标题左侧标签，目前为标签图片的 Url 数组	`string[]`	-
layout	卡片布局方式	`column` / `row`	`row`
round	是否为圆角卡片	`boolean` / `number`	`true`	`v0.2.7`
size	卡片大小，仅 layout 为 `column` 时生效	`large` / `middle` / `small`	`middle`
styles	配置卡片内置模块的 style	`Record<SemanticDOM, React.CSSProperties>`	-
title	标题	string	-
titleLine	标题行数，默认2，即2行省略	`number` / `string`	2
titleOverflow	标题超出省略方式	`ellipsis` / `clip`	`clip`

插槽

参数	说明	类型	默认值	版本
actionArea	自定义右下角操作区域	ReactNode	-
footer	自定义脚部内容	ReactNode	-
header	自定义头部内容	ReactNode	-
imageBadge	自定义图片徽章	ReactNode	-
infoFooter	自定义内容区脚部内容	ReactNode	-
price	自定义价格	ReactNode	-
promoDescription	自定义促销描述内容	ReactNode	-
promoHeader	自定义促销头部内容	ReactNode	-
shopDescription	自定义店铺介绍内容	ReactNode	-	`v0.6.0`

SemanticDOM

参数	说明
body	设置卡片内容区域
cover	设置封面
container	设置容器区域
header	设置头部区域
footer	设置脚部区域
title	设置卡片标题

介绍​

用法​

基本引入​

基础用法​

卡片圆角 & 图片圆角​

标题显示行数 & 溢出方式​

布局插槽展示​

API​

属性​

插槽​

SemanticDOM​

介绍

用法

基本引入

基础用法

卡片圆角 & 图片圆角

标题显示行数 & 溢出方式

布局插槽展示

API

属性

插槽

SemanticDOM